<template>
    <div id="home">
        <el-container>
            <el-header>
                <div class="header_title">高考填志愿后台管理</div>
                <div class="header_info">
                    <div class="header_info_userimg">
                        <el-image
                            style="width: 100%; height: 100%"
                            src=""
                            fit="cover"
                        />
                    </div>
                    <div class="header_info_username">admin</div>
                    <el-button type="" text class="logout">退出登录</el-button>
                </div>
            </el-header>
            <el-container>
                <!-- 左侧导航 用户信息 菜单 -->
                    <el-aside width="200px">
                        <el-scrollbar height="100%">
                        <!-- 用户信息 -->
                        <div class="aside_userinfo">
                            <el-avatar src="" />
                            <div class="aside_userinfo_txt">
                                <div class="aside_userinfo_username">admin</div>
                                <div class="aside_userinfo_role">
                                    <div></div>
                                    <span>超级管理员</span>
                                </div>
                            </div>
                        </div>
    
                        <!-- 菜单 -->
                        <el-menu
                            active-text-color="#8AC5F9"
                            background-color="#263238"
                            class="el-menu-vertical-demo"
                            text-color="#fff"
                            :unique-opened="true"
                            :router="true"
                            :default-active="$route.path"
                        >
                            <!-- 一级菜单 -->
                            <el-sub-menu
                                :index="item.id + ''"
                                v-for="item in menuList"
                                :key="item.id"
                                background-color="#2C3B41"
                            >
                                <!-- 一级菜单模板 -->
                                <template #title>
                                    <el-icon><location /></el-icon>
                                    <span>{{item.name}}</span>
                                </template>
                                <!-- 二级子菜单 -->
                                <el-menu-item
                                    :index="'/' + secItem.path"
                                    v-for="secItem in item.children"
                                    :key="secItem.id"
                                >
                                    <!-- 二级菜单模板 -->
                                    {{secItem.name}}
                                </el-menu-item>
                            </el-sub-menu>
    
                        </el-menu>
                    </el-scrollbar>
                </el-aside>

                <!-- 右侧主体内容  路由组件 -->
                <el-main>
                    <el-scrollbar height="100%">
                        <router-view></router-view>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { uplus } from '../api/axiosPlus'
import { useRoute } from 'vue-router'

function userMenuData () {
    const route = useRoute()

    // 获取登录路由传参
    const param = route.query
    console.log(param);

    const data = reactive({
        menuList: []
    })
  
            console.log(11111111111);
        let add = JSON.parse(sessionStorage.getItem('uplus'))
        console.log(add);
    const getMenuData = async () => {
        const res = await uplus(add)


        // console.log(param);
        console.log(res);
        data.menuList = res.arr
        console.log(data.menuList);
    }
    

    return {
        ...toRefs(data),
        getMenuData
    }
}

export default {
    setup() {
        const { menuList, getMenuData } = userMenuData()
        onMounted(() => {
            getMenuData()
        })
        const activeIndex = ref('1')
        const handleSelect = (key, keyPath) => {
            console.log(key, keyPath)
            activeIndex = keyPath[0]
        }



        return {
            menuList,
            activeIndex,
            handleSelect
        }
    },
}
</script>

<style lang="less" scoped>
#home {
    width: 100%;
    height: 100%;

    .header_title{
        font-size: 16px;
        font-weight: bold;
    }

    .header_info {
        display: flex;
        align-items: center;
        font-weight: 600;
        color: #fff;

        .header_info_userimg {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
        }

        .header_info_username {
            margin-right: 5px;
        }

        .logout{
            color: #fff;
            font-weight: bold;
            margin-right: -15px;
            background: #1890ff;


            &:hover{
                background: #1890ff;
            }
        }
    }

    .aside_userinfo {
        width: 80%;
        display: flex;
        padding: 25px 0;
        margin: 0 20px;
        border-bottom: 2px solid #43474B;

        .aside_userinfo_txt {
            margin-left: 25px;

            .aside_userinfo_username {
                font-size: 14px;
            }

            .aside_userinfo_role {
                display: flex;
                align-items: center;
                font-size: 14px;
                margin-top: 5px;

                div {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: #28d17c;
                    margin-right: 5px;
                }

                span{
                    font-size: 12px;
                }
            }
        }
    }
        
}

/deep/ .el-container {
    height: 100%;
}

/deep/ .el-header {
    background-color: #1890ff;
    color: #fff;
    text-align: center;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

 /deep/ .el-aside {
    height: 100%;
    background: #263238;
    color: #fff;
    text-align: left;
    box-sizing: border-box;
 }

/deep/ .el-main {
    background-color: #ECF0F5;
    color: #333;
    text-align: center;
    height: 100%;
    overflow: hidden;
    padding: 0;
}
/deep/ .el-main > .el-scrollbar {
    padding: 20px;
    box-sizing: border-box;
}
/deep/ .el-menu {
    border-right: 0;
}
/deep/ .el-sub-menu__title * {
    font-weight: bold;
}
/deep/ .el-menu-item {
    font-weight: bold;
    margin-left: 10px;
}
/deep/.el-menu .el-menu--inline{
    background: #2C3B41;
}
/deep/.el-menu-item:hover{
    background: #2C3B41;
}
.el-menu ::v-deep(.el-sub-menu.is-active > .el-sub-menu__title) {
  color: #8AC5F9 !important;
}
/deep/.el-aside{
    overflow: hidden;
}
</style>
